<template>
  <r-view class="view-product">
    <r-slider :list="product.images"/>
    <h2>{{product.title}}</h2>
    <div class="panel-props">
      <h3>产品规格</h3>
      <div v-for="(propGroup, groupIndex) in product.props" :key="groupIndex">
        <h4>{{propGroup.title}}</h4>
        <ul class="list-prop">
          <li v-for="(prop, propIndex) in propGroup.list" :key="propIndex">{{prop.name}}</li>
        </ul>
      </div>
    </div>
    <div class="bar-props">
      <span>已选择：</span>
      <span>魅影灰 x1</span>
    </div>
    <div class="panel-detail">
      <h3>产品详情</h3>
      <img v-for="(detail, index) in product.detail" :key="index" :src="detail"/>
    </div>
    <footer slot="bar" class="footer bar-bottom-fixed">
      <router-link to="/service" class="link-service"><r-icon name="service.svg"/></router-link>
      <router-link to="/cart" class="link-cart"><r-icon name="cart.svg"/></router-link>
      <r-btn none class="btn btn-cart">加入购物车</r-btn>
      <r-btn primary class="btn btn-pay">立即购买</r-btn>
    </footer>
  </r-view>
</template>
<script>
import RView from 'src/components/r-view'
import RSlider from 'src/components/r-slider'
import RBtn from 'src/components/r-btn'
import RIcon from 'src/components/r-icon'
import product from '../../resource/data/product'
export default {
  name: 'view-product',
  components: {
    RView,
    RSlider,
    RBtn,
    RIcon
  },
  data () {
    return {
      product
    }
  }
}
</script>
<style lang="scss">
  @import "../styles/index";

  .view-product {
    .panel-props {
      padding: 0 $breath;
    }

    h2 {
      font-size: 16px;
      color: $color-head;
      font-weight: normal;
      margin: 10px $breath;
    }

    .list-prop {
      overflow: hidden;

      li {
        display: inline-block;
        float: left;
        border: 1px solid #ccc;
        padding: 3px 5px;
        margin-right: 8px;
        border-radius: 4px;
      }
    }

    .panel-detail {
      padding: 0 6px;
      margin: 20px 0;

      img {
        display: block;
        width: 100%;
      }
    }

    .footer {
      .btn {
        border-radius: 0;
        height: 100%;
      }

      .btn-cart {
        flex: 2;
      }

      .btn-pay {
        flex: 4;
      }

      .link-service,
      .link-cart {
        flex: 1;
        @extend %flex-center;
        flex-direction: column;
        font-size: 12px;
        line-height: 16px;
        padding: 3px 5px;

        svg {
          width: 22px;
          fill: currentColor;
        }
      }

      span {
        padding: 0 5px;
      }
    }
  }
</style>
